<template>
	<view>
		参考：[axios中文网|axios API 中文文档 | axios](http://www.axios-js.com/)
		<br />
		Api:[开源社区 - by apizza](https://api.apiopen.top/api.html#4c502eec73ce429fb1c4a7f519360d24)
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item v-for="(item, index) in testList" :key="index" :icon="item.icon" :title="item.title" @click="repuestTo(item.name)"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-demo">
			<view class="u-demo-wrap">
				<view class="u-demo-area">
					<view class="no-mode-here">请求结果为：</view>
					<view class="u-demo-result-line">{{ JSON.stringify(result) }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as Api from '@/api/test.js';
export default {
	data() {
		return {
			result: '',
			testList: [
				{ title: '$axios-Get请求', icon: 'star', name: 'axios-get' },
				{ title: '$axios-Post请求', icon: 'coupon', name: 'axios-post' },
				{ title: 'async await-Get请求', icon: 'coupon', name: 'async-get' },
				{ title: 'async await-Post请求', icon: 'coupon', name: 'async-post' },
				{ title: 'error-axios-code-400', icon: 'coupon', name: 'error-axios-400' },
				{ title: 'error-axios-status-404', icon: 'coupon', name: 'error-axios-404' },
				{ title: 'error-async-code-400', icon: 'coupon', name: 'error-async-400' },
				{ title: 'error-async-status-404', icon: 'coupon', name: 'error-async-404' }
			]
		};
	},
	onLoad() {
		console.log(this.$Route);
	},
	methods: {
		repuestTo(name) {
			this.result = '';
			console.log('name==', name);
			switch (name) {
				case 'axios-get':
					this.axiosGet();
					break;
				case 'axios-post':
					this.axiosPost();
					break;
				case 'async-get':
					this.asyncGet();
					break;
				case 'async-post':
					this.asyncPost();
					break;
				case 'error-axios-404':
					this.errorAxios('404');
					break;
				case 'error-axios-400':
					this.errorAxios('400');
					break;
				case 'error-async-404':
					this.errorAsync('404');
					break;
				case 'error-async-400':
					this.errorAsync('400');
					break;
				default:
					break;
			}
		},
		errorAxios(code) {
			let url = code == '400' ? '/developerRegister' : '/getTime';
			this.$axios({
				methods: 'GET',
				url: url
			})
				.then(res => {
					console.log('errorGet=res==', res);
					this.result = res;
				})
				.catch(err => {
					console.log('errorGet=err==', err);
				});
		},
		async errorAsync(code) {
			let url = code == '400' ? '/developerRegister' : '/getTime';
			const { result, error, message } = await this.$axios({
				methods: 'GET',
				url: url
			});
			this.result = result;
			console.log('asyncGet=result==', result);
			console.log('asyncGet=message==', message);
			console.log('asyncGet=error==', error);
		},
		axiosGet() {
			this.$axios({
				methods: 'GET',
				url: '/getWangYiNews'
			})
				.then(res => {
					console.log('axiosGet=res==', res);
					this.result = res;
				})
				.catch(err => {
					console.log(err);
				});
		},
		axiosPost() {
			this.$axios({
				methods: 'GET',
				url: '/getWangYiNews',
				params: { page: 2, count: 5 }
			})
				.then(res => {
					console.log('axiosPost=res==', res);
					this.result = res;
				})
				.catch(err => {
					console.log(err);
				});
		},
		async asyncGet() {
			//无需配置统一Api.js请求
			let params = { page: 3, count: 5 };
			const { result, error, message } = await this.$axios({
				methods: 'GET',
				url: '/getWangYiNews',
				params
			});
			this.result = result;
			console.log('asyncGet=result==', result);
			console.log('asyncGet=message==', message);
			console.log('asyncGet=error==', error);
		},
		async asyncPost() {
			//使用统一管理APi请求方式
			let params = { page: 4, count: 5 };
			const { result } = await Api.asyncPost(params);
			this.result = result;
			console.log('asyncPost=result==', result);
		}
	}
};
</script>

<style lang="scss"></style>
